<template>
    <div class="functional_zone">
        <headline>
            <template slot="title">功能区</template>
        </headline>
      <navigation-card class="title" :tabList="tabList" v-on:onTabChange="contentListStr">
          <template slot="navigation">
        <ul class="content" v-if="flageShow==='tab1'">
            <li class="content_item" @click="goto(item.path)" v-for="item in FunctionalZoneList " :key="item.id">
                <!-- <div>{{item.id}}</div> -->
                <img :src="item.imgUrl" alt="">
                <span>{{item.title}}</span>
                <!-- <img src="../../../assets/img/workplace/编组 24.png" alt=""> -->
            </li>
        </ul>
        <ul class="content" v-else>
            <li class="content_item" v-for="item in FunctionalZoneList " :key="item.id">
                <!-- <div>{{item.id}}</div> -->
                <!-- <img :src="item.imgUrl" alt=""> -->
                <span>待开发</span>
                <!-- <img src="../../../assets/img/workplace/编组 24.png" alt=""> -->
            </li>
        </ul>
          </template>
      </navigation-card>
        
    </div>
</template>

<script>
//导入
import Headline from '../headline/Headline.vue'
import NavigationCard from '../navigationcard/index.vue'

    export default {
        components:{
            Headline,NavigationCard
        },
        data() {
            return { 
                flageShow:'tab1',
                current: ['mail'],
                FunctionalZoneList:[ 
                    {id:'1',imgUrl:require('../../../assets/img/workplace/编组 24.png'),title:'需求管理',path:'/projectList'}, //,path:'/dashboard/workplace/xuqu'
                    {id:'2',imgUrl:require('../../../assets/img/workplace/编组 25.png'),title:'产品型谱管理',path:'/projectList'},
                    {id:'3',imgUrl:require('../../../assets/img/workplace/编组 26.png'),title:'项目管理',path:'/projectList'},
                    {id:'4',imgUrl:require('../../../assets/img/workplace/编组 27.png'),title:'产品数据管理',path:'/projectList'},
                    // {id:'5',imgUrl:require('../../../assets/img/workplace/编组 27.png'),title:'产品数据管理',path:'/projectList'},
                ],
                //控制菜单表头数据,传给NavigationCard
                tabList: [
                    {
                    key: 'tab1',
                    tab: '研发',
                    scopedSlots: { tab: 'customRender' },
                    },
                    {
                    key: 'tab2',
                    tab: '公共',
                    }
                    ]
            };
        },
        methods:{
            goto(path){
                this.$router.push(path)
            },
            contentListStr(flageShow){
                this.flageShow=flageShow
                console.log(flageShow);
            }
        }
    }
</script>

<style lang="less" scoped>

.title .ant-menu-item {
    text-align: center;
    width: 200px;
}
.content{
    height: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    .content_item{
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: ceil(100%-10px);
        text-align: center;
        img{
            width: 72px;
            height: 72px;
            margin-bottom: 10px;
        }
        span{
            width: 100px;
            height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #666666;
            text-align: center;
            font-weight: 400;
        }
    }
    .content_item:hover span{
        color: #386BD7;
    }
}
</style>
